<template>
  <div class="box">
    <aside-box>
      <template #zh> 饼图 </template>
      <template #en> pie chart </template>
      <div class="pie" ref="pieRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import giftImageUrl from "../../assets/images/53earth.png";

const option = {
  // graphic 对象设置背景图片适合图形存在中间位置
  // graphic: {
  //   // 这个属性可以在饼图内部填充图片,文字等
  //   elements: [
  //     {
  //   type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  //   style: {
  //     image: giftImageUrl, //这里添加图片地址
  //     width: 145,
  //     height: 145,
  //   },
  //   left: 'center',
  //   top: "middle", //配置图片居中
  //     },
  //   ],
  // },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    top: "10%",
    left: "10%",
    icon: "circle", // 修改小图标为圆形
    textStyle: {
      color: "#fff",
    },
  },
  series: [
    {
      type: "pie",
      left: "45%",
      radius: ["55%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 1,
      },
      label: {
        show: true,
        position: "center",
        // 图形移动通过formatter和rich属性增加背景图， label设置true
        formatter: [
          "{a|}", // 使用富文本标记设置文字样式和背景图片
        ].join("\n"),
        rich: {
          a: {
            color: "#333",
            fontSize: 14,
            width: 145, // 设置背景图片宽度
            height: 145, // 设置背景图片高度
            backgroundColor: {
              image: giftImageUrl, // 设置背景图片
            },
          },
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          // fontWeight: 'bold'
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
};

// 实例化echarts
const [pieRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .pie {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>